<template>
  <view class="container">
    <!-- 左侧边栏 -->
    <view class="sidebar">
      <view
        v-for="(category, index) in categoryList"
        :key="index"
        class="category-item"
        @click="selectCategory(category)"
      >
        {{ category.name }}
      </view>
    </view>
    <!-- 右侧可以用来展示对应分类景点列表等内容的区域 -->
    <view class="main-content">
      <view v-if="selectedCategory.name === '自然风光类'">
        <view
          v-for="(scenicSpot, spotIndex) in naturalScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
          <!-- 添加收藏按钮 -->
          <button @click="collectScenicSpot(scenicSpot)">收藏</button>
        </view>
      </view>
      <view v-else-if="selectedCategory.name === '历史人文类'">
        <view
          v-for="(scenicSpot, spotIndex) in historicalScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
          <button @click="collectScenicSpot(scenicSpot)">收藏</button>
        </view>
      </view>
      <view v-else-if="selectedCategory.name === '现代娱乐类'">
        <view
          v-for="(scenicSpot, spotIndex) in modernEntertainmentScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
          <button @click="collectScenicSpot(scenicSpot)">收藏</button>
        </view>
      </view>
      <view v-else-if="selectedCategory.name === '名胜古迹类'">
        <view
          v-for="(scenicSpot, spotIndex) in famousHistoricalScenicSpots"
          :key="spotIndex"
          class="scenic-spot-item"
        >
          <image :src="scenicSpot.image" class="spot-image" mode="aspectFit"></image>
          <text class="spot-name">{{ scenicSpot.name }}</text>
          <text class="spot-description">{{ scenicSpot.description }}</text>
          <button @click="collectScenicSpot(scenicSpot)">收藏</button>
        </view>
      </view>
    </view>
    <!-- 新增收藏夹展示区域 -->
    <view v-if="showFavorite" class="favorite-content">
      <view
        v-for="(favoriteSpot, favoriteIndex) in favoriteScenicSpots"
        :key="favoriteIndex"
        class="favorite-spot-item"
      >
        <image :src="favoriteSpot.image" class="spot-image" mode="aspectFit"></image>
        <text class="spot-name">{{ favoriteSpot.name }}</text>
        <text class="spot-description">{{ favoriteSpot.description }}</text>
        <button @click="removeFromFavorite(favoriteSpot)">删除</button>
      </view>
    </view>
    <button @click="toggleFavoriteView">查看收藏夹</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        categoryList: [
          { name: "自然风光类" },
          { name: "历史人文类" },
          { name: "现代娱乐类" },
          { name: "名胜古迹类" }
        ],
        selectedCategory: { name: "" },
        // 自然风光类景点数据（模拟），新增image属性用于存放图片路径
        naturalScenicSpots: [
          {
            name: "黄山",
            description: "中国著名的山岳风景区，以奇松、怪石、云海等景观闻名。",
            image: "/static/jingdian/1.webp" // 假设图片放在static/images目录下，替换为实际路径
          },
          {
            name: "张家界",
            description: "奇峰异石林立，自然风光独特，仿佛仙境一般。",
            image: "/static/jingdian/2.webp"
          },
          {
            name: "九寨沟",
            description: "有着多彩的湖泊、瀑布和雪峰，景色美不胜收。",
            image: "/static/jingdian/3.jpg"
          }
        ],
        // 历史人文类景点数据（模拟）
        historicalScenicSpots: [
			{
			  name: "秦始皇",
			  description: "秦始皇统一六国，建立了中国历史上第一个大一统王朝，推行了一系列统一措施，如统一文字、度量衡、货币等。",
			  image: "/static/jingdian/p1.jpg"
			},
			{
			  name: "李世民",
			  description: "即位后以隋亡为鉴，虚怀纳谏，注重吏治。任用魏征、房玄龄、杜如晦等贤臣，使社会安定、经济复苏，开创 “贞观之治”.",
			  image: "/static/jingdian/p2.jpg"
			},
			{
			  name: "贾平凹",
			  description: "贾平凹，1952 年生，陕西丹凤人，当代著名作家，著有《浮躁》《废都》《秦腔》等，获茅盾文学奖等多项大奖.",
			  image: "/static/jingdian/person6.jpg"
			},
          {
            name: "故宫博物院",
            description: "中国明清两代的皇家宫殿，承载着丰富的历史文化。",
            image: "/static/jingdian/4.jpg"
          },
          {
            name: "兵马俑",
            description: "世界闻名的考古遗址，展示了古代军事文化的壮观景象。",
            image: "/static/jingdian/5.webp"
          },
          {
            name: "曲阜孔庙",
            description: "纪念孔子的重要场所，蕴含深厚的儒家文化底蕴。",
            image: "/static/jingdian/6.webp"
          }
        ],
        // 现代娱乐类景点数据（模拟）
        modernEntertainmentScenicSpots: [
          {
            name: "上海迪士尼乐园",
            description: "充满欢乐与梦幻的主题乐园，适合全家游玩。",
            image: "/static/jingdian/7.webp"
          },
          {
            name: "长隆欢乐世界",
            description: "拥有众多刺激好玩的游乐设施，是娱乐的好去处。",
            image: "/static/jingdian/8.webp"
          },
          {
            name: "方特欢乐世界",
            description: "提供多样化的主题游乐项目，带给游客精彩体验。",
            image: "/static/jingdian/9.webp"
          }
        ],
        // 名胜古迹类景点数据（模拟）
        famousHistoricalScenicSpots: [
          {
            name: "万里长城",
            description: "世界著名的古代防御工程，气势恢宏，见证历史变迁。",
            image: "/static/jingdian/10.webp"
          },
          {
            name: "大雁塔",
            description: "历史悠久的佛教建筑，有着极高的文化艺术价值。",
            image: "/static/jingdian/11.webp"
          },
          {
            name: "承德避暑山庄",
            description: "清代皇帝的避暑胜地，融合了多种园林风格。",
            image: "/static/jingdian/12.webp"
          }
        ],
        // 新增收藏景点数组
        favoriteScenicSpots: [],
        // 控制收藏夹展示与否的变量
        showFavorite: false
      };
    },
    methods: {
      selectCategory(category) {
        this.selectedCategory = category;
      },
      // 收藏景点的方法
      collectScenicSpot(scenicSpot) {
        this.favoriteScenicSpots.push(scenicSpot);
      },
      // 切换收藏夹展示状态的方法
      toggleFavoriteView() {
        this.showFavorite =!this.showFavorite;
      },
      // 从收藏夹删除景点的方法
      removeFromFavorite(favoriteSpot) {
        const index = this.favoriteScenicSpots.findIndex(
          spot => spot.name === favoriteSpot.name
        );
        if (index!== -1) {
          this.favoriteScenicSpots.splice(index, 1);
        }
      }
    }
  };
</script>

<style>
 .container {
    display: flex;
    flex-direction: row;
  }

 .sidebar {
    width: 100px;
    background-color: #f5f5f5;
  }

 .category-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }

 .main-content {
    flex: 1;
    padding: 10px;
  }

 .scenic-spot-item {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px;
  }

 .spot-name {
    font-weight: bold;
  }

 .spot-image {
    width: 100%;
    height: 200px;
    margin-bottom: 5px;
  }

  /* 新增收藏夹相关样式 */
 .favorite-content {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
  }

 .favorite-spot-item {
    margin-bottom: 10px;
    border: 1px solid #ccc;
    padding: 5px;
  }
</style>